@import (reference) "mixins.less";
@import (reference) "prefixer.less";
@color1:#4fedb1;
@color2:#a1d9ff;
html,body {
    /*640px 基准字体*/
    font-family: 'Microsoft YaHei';
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    .container {
        background:url('../images/bg.png') 0 0 no-repeat;
        .background-size(cover);
        width: 100%;
        height: 100%;
        padding:0px;
        margin:0px;
        overflow:hidden;
        .shuttle {
                width: 3rem;
                height: 3rem;
                position:relative;
                margin:0.1rem auto;
            .kmph,.speed {
                font-size:0.3rem;
                color:#7380af;
                text-align:center;
                padding-top:0.7rem;
            }
            .speed {
                color:#fff;
                padding-top:0.1rem;
                font-size:0.7rem;
            }
            .shuttler{
                width:3.2rem;
                height:3.2rem;
                opacity:0;
                position:absolute;
                left:-0.1rem;
                top:-0.1rem;
                background:url('../images/shuttle.png');
                background-size:3.0rem 1.0rem;//0.85rem
                background-position:top;
                background-repeat:no-repeat;
            }
            ul {
                margin-left: auto;
                margin-right: auto;
                list-style: none;
                li{
                    background-color: rgba(255,255,255,0.3);
                    list-style: none;
                    height: 0.05rem;
                    width: 0.2rem;
                    padding: 0px;
                    margin: 0px;
                    position: absolute;
                    display: inline-block;
                    .switch-color(@i) when (@i <= 15) {
                        background-color: rgb(ceil(79 + (5.46666667 * (@i))), ceil(237 - (1.3333333332 * (@i))), ceil(177 + (5.2 * (@i))));
                    }
                    .switch-color(@i) when (@i > 15) and (@i < 35) {
                        background-color: rgb(ceil(161 + (5.53333333333 * (@i - 15))), ceil(217 - (5.46666666666 * (@i - 15))), ceil(255 - (2.86 * (@i - 15))));
                    }
                    .loop(@i) when (@i >= 1) {
                        &:nth-child(@{i}) {
                            left: 1.4rem + 1.3rem * cos(135deg  + (5deg * (@i - 1)));
                            top: 1.5rem + 1.3rem * sin(135deg  + (5deg * (@i - 1)));
                            .transform-rotate(135deg  + (5deg * (@i - 1)));
                            &.on {
                                .switch-color(@i);
                            }
                        }
                        .loop(@i - 1);
                    }
                    .loop(55);
                }
            }
        }
        .footer {
            position:fixed;
            bottom:0;
            z-index:4;
            width:100%;
            background-size:contain;
            .police,.incident {
                width:50%;
                height:0.7rem;
                bottom:0;
                position: absolute;
            }
            .police {
                left:0;
                background:url("../images/police.png") 0 0 no-repeat;
                background-size:100% 0.7rem;
            }
            .incident {
                right:0;
                background:url("../images/incident.png") 0 0 no-repeat;
                background-size:100% 0.7rem;
            }
            .monitor,.numbers {
                opacity:0;
                width:50%;
                bottom:0.5rem;
                height:1.2rem;
                position:absolute;
            }
            .monitor{
                left:0;
                background:url("../images/monitor-bg.png") 0 0 no-repeat;
                background-size:contain;
                background-position:left;
            }
            .numbers {
                width:65%;
                font-size:0.18rem;
                color:#9A9BA5;
                right:0;
                bottom:0.3rem;
                text-align:left;
                padding:0.1rem;
                .nearest {
                    font-size:0.14rem;
                }
                .distance {
                    font-size:0.28rem;
                    color:#4FEDB1;
                }
            }
            .footerBg {
                opacity:0;
                height:1.7rem;
                background-color:rgba(255,255,255,0.1);
            }
        }
    }
}